<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="colorui/main.css">
    <link rel="stylesheet" type="text/css" href="colorui/icon.css">
    <script type="text/javascript" src="js/webview.js"></script>
    <script type="text/javascript" src="rtc/adapter-latest.js"></script>
    <link rel="stylesheet" type="text/css" href="style/style.css">
    <style>
      body {
        background-color: #000;
        margin: 0;
      }

      .cu-avatar.xl {
        width: 93px;
        height: 93px
      }

      .trtc-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
      }

      .trtc-bar .roundicon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        line-height: 60px;
        font-size: 28px;
        position: relative;
        margin: 0 auto
      }

      .trtc-bar .roundicon.rotate {
        -webkit-transform: rotate(125deg);
        transform: rotate(125deg)
      }

      .trtc-bar .roundicon.close::before {
        content: " ";
        width: 2px;
        height: 32px;
        margin-top: -16px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg)
      }

      .trtc-bar .roundicon[class*="line"]::after {
        content: " ";
        display: block;
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid currentColor;
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
        border-radius: 50%;
        z-index: 1;
        pointer-events: none
      }

      .grid.col-2>div {
        width: 50%;
      }

      .grid.col-3>div {
        width: 33.33%;
      }

      .padding {
        padding: 15px;
        box-sizing: border-box;
      }

      .margin-top {
        margin-top: 15px;
      }

      .padding-top-sm {
        padding-top: 10px;
      }

      .text-muted {
        color: #e0e0e0;
        font-size: 14px;
      }

      .hidden,
      .noaf::after,
      .nobf::before {
        display: none !important;
      }

      .bg-limegreen {
        background-color: #05c160;
        color: #fff;
      }

      .trtc-bar .roundicon.close::before {
        content: " ";
        width: 2px;
        height: 32px;
        margin-top: -16px;
        background-color: #fff;
        left: 50%;
        top: 50%;
        position: absolute;
        z-index: 100;
        -webkit-transform: rotate(139deg);
        transform: rotate(139deg);
      }

      #remote_stream {
        width: 100vw;
        height: 100vh;
      }

      .col-2 .v-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100vw / 2);
        overflow: hidden;
      }

      .col-3 .v-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100vw / 3);
        overflow: hidden;
      }

      .v-item {
        position: relative;
      }

      .loader-71,
      .volume {
        position: absolute;
        left: 0;
        bottom: 0;
      }

      .v-voice {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 10px;
        bottom: 10px;
        width: 30px;
        height: 30px;
        font-size: 18px;
        border-radius: 50%;
      }

      .volume {
        width: 100%;
        height: 4.8px;
        display: inline-block;
        background: rgba(0, 0, 0, .1);
        overflow: hidden;
      }

      .volume::after {
        content: "";
        width: 0%;
        height: 4.8px;
        background: #18b566;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .1s;
      }

      .disabled {
        pointer-events: none;
        cursor: default;
        opacity: 0.6;
      }
	  .padding-ios{
	  		  padding-top: env(safe-area-inset-top)
	  }
	  .cu-bar{
	  		  top: 60px;
	  		  height: 60px;
	  }
	  .video-box{
	  		  padding-top: 60px;
	  }
	  @supports (top: env(safe-area-inset-top)) {
	      .cu-bar{
	          top: 100px;
				height: 90px;
	      }
		  .video-box{
				  padding-top: 90px;
		  }
	  }
	  
    </style>
  </head>
  <body>
    <div>
      <div class="cu-custom padding-ios">
        <div class="cu-bar fixed none-bg text-white bg-img"  class="bg-black">
          <div class="content callTime">
            <span>邀请您加入会议</span>
          </div>
          <!-- <div class="text-xl action right margin-right-xxl">
            <span class="cuIcon-sound"></span>
          </div>
      		<div class="text-xl action right">
      		  <span class="cuIcon-roundadd"></span>
      		</div> -->
        </div>
      </div>
      <div id="remote_stream" class="video-box">
        <div class="grid col-2" id="videos">
          <div class="v-item">
            <div class="v-thumb">
              <img class="my_thumb" src="/static/wallpaper.png" alt="">
            </div>
            <audio id="my_video" autoplay></audio>
            <span class="v-voice text-green cuIcon-voicefill text-shadow"></span>
          </div>
        </div>
      </div>
      <div class="foot trtc-bar">
        <div class="grid col-2 btnGroup">
          <div class="padding text-center hidden voiceBtn" id="voiceBtn" onclick="voiceBtn()">
            <div class="roundicon bg-white voiceBtnIn">
              <span class="cuIcon-voicefill"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted voiceBtnText" id="voiceBtnText">麦克风</span>
            </div>
          </div>
          <div class="padding text-center" onclick="cancelBtnd()">
            <div class="roundicon bg-red rotate">
              <span class="cuIcon-dianhua"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted"></span>
            </div>
          </div>
          <div class="padding text-center asceptCall" id="asceptCall" onclick="acceptVoice()">
            <div class="roundicon bg-limegreen">
              <span class="cuIcon-dianhua"></span>
            </div>
            <div class="padding-top-sm">
              <!-- <span class="text-muted">接听</span> -->
            </div>
          </div>
          <div class="padding text-center hidden speakBtn" id="speakBtn" onclick="speakBtn()">
            <div class="roundicon bg-white speakBtnIn">
              <span class="cuIcon-notificationfill"></span>
            </div>
            <div class="padding-top-sm">
              <span class="text-muted speakBtnText" id="speakBtnText">听筒</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script type="text/javascript" src="config/base.js"></script>
  <script type="text/javascript" src="config/config-group.js"></script>
  <script type="text/javascript" src="js/jsonly.js"></script>
  <script>
    const message = isJSON(decodeURIComponent(getQueryVariable('message')))
    Object.keys(JSON.parse(message.content)).forEach(key => {
      if (message.sender === key) {
        senderName = JSON.parse(message.content)[key]
      }
    })
    timeString = senderName + '邀请您加入会议'
    $('.callTime').html(timeString)
    navigator.mediaDevices.getUserMedia({
      video: false,
      audio: true
    }).then((mediastream) => {
      localStream = mediastream
      volumeWave(mediastream, getQueryVariable('id'))
      stream[getQueryVariable('id')] = mediastream
      let group = JSON.parse(decodeURIComponent(getQueryVariable('group')))
      beginTime(group, 1)
      Object.keys(JSON.parse(message.content)).forEach(key => {
        window.pc[key] = new RTCPeerConnection(config); // rtc
        localStream.getTracks().forEach(track => window.pc[key].addTrack(track, localStream));
        window.pc[key].ontrack = (event) => {
          if (!callFlag) {
            callFlag = true
            startTime()
          }
          removeAllClass('voiceBtn', 'hidden')
          removeAllClass('speakBtn', 'hidden')
          addAllClass('asceptCall', 'hidden')
          removeAllClass('btnGroup', 'col-2')
          addAllClass('btnGroup', 'col-3')
          $('.loader_' + key).addClass('hidden')
          $('.v-modal_' + key).addClass('hidden')
          $('.v-voice_' + key).addClass('text-green')
          $('.v-voice_' + key).removeClass('text-gray')
          $('.v-status_' + key).addClass('hidden')
          stream[key] = event.streams[0]
          volumeWave(event.streams[0], key)
          document.getElementById('my_video_' + key).srcObject = event.streams[0]
        }
        pass[key] = false
        let msg = {
          ...message
        }
        msg.sender = key
        window.pc[key].onicecandidate = (event) => {
          // 监听ice
          var iceCandidate = event.candidate;
          if (iceCandidate) {
            postMsg({
              iceCandidate: 'iceCandidate',
              candidate: JSON.parse(JSON.stringify(iceCandidate)),
              message: msg
            }, '*');
          }
        };
        if (key === getQueryVariable('id')) {
          delete window.pc[key]
        }
      })
      // 同步音频
    }).catch((e) => {});
    window.addEventListener('message', (e) => {
      if (e.data['addGrouped'] === 'addGrouped') {
        addGroup = JSON.parse(e.data['message'].content)
        updateAddInfo('voice')
        Object.keys(addGroup).forEach(key => {
          window.pc[key] = new RTCPeerConnection(config); // rtc
          localStream.getTracks().forEach(track => window.pc[key].addTrack(track, localStream));
          window.pc[key].ontrack = (event) => {
            if (!callFlag) {
              callFlag = true
              startTime()
            }
            removeAllClass('voiceBtn', 'hidden')
            removeAllClass('speakBtn', 'hidden')
            addAllClass('asceptCall', 'hidden')
            removeAllClass('btnGroup', 'col-2')
            addAllClass('btnGroup', 'col-3')
            $('.loader_' + key).addClass('hidden')
            $('.v-modal_' + key).addClass('hidden')
            $('.v-voice_' + key).addClass('text-green')
            $('.v-voice_' + key).removeClass('text-gray')
            $('.v-status_' + key).addClass('hidden')
            stream[key] = event.streams[0]
            volumeWave(event.streams[0], key)
            document.getElementById('my_video_' + key).srcObject = event.streams[0]
          }
          let msg = {
            ...message
          }
          msg.sender = key
          window.pc[key].onicecandidate = (event) => {
            // 监听ice
            var iceCandidate = event.candidate;
            if (iceCandidate) {
              postMsg({
                iceCandidate: 'iceCandidate',
                candidate: JSON.parse(JSON.stringify(iceCandidate)),
                message: msg
              }, '*');
            }
          };
          if (key === getQueryVariable('id')) {
            delete window.pc[key]
          }
        })
        // 同步音频
        return
      }
      receiveMessagecallback(e)
    }, false);
    window.getUniAppMessage = (arg) => {
      console.log('网页接收到消息')
      const data = {
        data: jsonly(arg)
      }
      if (data.data['addGrouped'] === 'addGrouped') {
        addGroup = typeof(data.data['message'].content) !== 'object' ? JSON.parse(data.data['message'].content) : data
          .data['message'].content
        updateAddInfo('voice')
        Object.keys(addGroup).forEach(key => {
          window.pc[key] = new RTCPeerConnection(config); // rtc
          localStream.getTracks().forEach(track => window.pc[key].addTrack(track, localStream));
          window.pc[key].ontrack = (event) => {
            removeAllClass('voiceBtn', 'hidden')
            removeAllClass('speakBtn', 'hidden')
            addAllClass('asceptCall', 'hidden')
            removeAllClass('btnGroup', 'col-2')
            addAllClass('btnGroup', 'col-3')
            $('.loader_' + key).addClass('hidden')
            $('.v-modal_' + key).addClass('hidden')
            $('.v-voice_' + key).addClass('text-green')
            $('.v-voice_' + key).removeClass('text-gray')
            $('.v-status_' + key).addClass('hidden')
            stream[key] = event.streams[0]
            volumeWave(event.streams[0], key)
            document.getElementById('my_video_' + key).srcObject = event.streams[0]
          }
          let msg = {
            ...message
          }
          msg.sender = key
          window.pc[key].onicecandidate = (event) => {
            // 监听ice
            var iceCandidate = event.candidate;
            if (iceCandidate) {
              postMsg({
                iceCandidate: 'iceCandidate',
                candidate: JSON.parse(JSON.stringify(iceCandidate)),
                message: msg
              }, '*');
            }
          };
          if (key === getQueryVariable('id')) {
            delete window.pc[key]
          }
        })
        // 同步音频
        return
      }
      receiveMessagecallback(data)
    }

    function receiveMessagecallback(e) {
      if (e.data && e.data['acceptRtc'] === "acceptRtc") {
        // 同意接电话
        const message = isJSON(e.data['message'])
        console.log(message)
        if (acceptCall) {
          if(!window.pc[message.sender]) {
            window.pc[message.sender] = new RTCPeerConnection(config); // rtc
            localStream.getTracks().forEach(track => window.pc[message.sender].addTrack(track, localStream));
            window.pc[message.sender].ontrack = (event) => {
              removeAllClass('voiceBtn', 'hidden')
              removeAllClass('speakBtn', 'hidden')
              addAllClass('asceptCall', 'hidden')
              removeAllClass('btnGroup', 'col-2')
              addAllClass('btnGroup', 'col-3')
              $('.loader_' + message.sender).addClass('hidden')
              $('.v-modal_' + message.sender).addClass('hidden')
              $('.v-voice_' + message.sender).addClass('text-green')
              $('.v-voice_' + message.sender).removeClass('text-gray')
              $('.v-status_' + message.sender).addClass('hidden')
              stream[message.sender] = event.streams[0]
              volumeWave(event.streams[0], message.sender)
              document.getElementById('my_video_' + message.sender).srcObject = event.streams[0]
            }
            let msg = {
              ...message
            }
            msg.sender = message.sender
            window.pc[message.sender].onicecandidate = (event) => {
              // 监听ice
              var iceCandidate = event.candidate;
              if (iceCandidate) {
                postMsg({
                  iceCandidate: 'iceCandidate',
                  candidate: JSON.parse(JSON.stringify(iceCandidate)),
                  message: msg
                }, '*');
              }
            };
            if (message.sender === getQueryVariable('id')) {
              delete window.pc[message.sender]
            }
            // 同步音频
          }
          createOffer(message)
        }

      }
      if (e.data && e.data['acceptOffer'] === "acceptOffer") {
        const message = isJSON(e.data['message'])
        setRemoteDescriptionOffer(e.data['sdp'], message);
        createAnswer(e.data['message'])
      }
      if (e.data && e.data['answer'] === "answer") {
        console.log('同步answer信息...')
        //同步answer信息...
        const message = isJSON(e.data['message'])
        setRemoteDescriptionAnswer(e.data['sdp'], message)
      }
      if (e.data && e.data['transmitIce'] === "transmitIce") {
        const message = isJSON(e.data['message'])
        if (typeof(e.data['iceCandidate']) === 'object') {
          addIceCandidate(e.data['iceCandidate'], message)
        } else {
          addIceCandidate(isJSON(e.data['iceCandidate']), message)
        }
      }
      if (e.data && e.data['cancelCall'] === "cancelCall") {
        // 取消通话
        const message = isJSON(e.data['message'])
        let group = JSON.parse(decodeURIComponent(getQueryVariable('group')))
        cancelCall(() => {
          Object.keys(group).forEach(key => {
            window.pc[key] && window.pc[key].close()
            delete window.pc[key]
          })
        }, 1)
      }
      if (e.data && e.data['handleUp'] === "handleUp") {
        // 解散通话
        const message = isJSON(e.data['message'])
        let group = JSON.parse(decodeURIComponent(getQueryVariable('group')))
        hangupAction(() => {
          Object.keys(group).forEach(key => {
            window.pc[key] && window.pc[key].close()
            delete window.pc[key]
          })
        }, 1)
      }
      if (e.data && e.data['quitRtc'] === "quitRtc") {
        // 退出通话
        const message = isJSON(e.data['message'])
        quitRtc(() => {
          $('.v-status_' + message.sender).removeClass('hidden')
          $('.v-status_' + message.sender).text('已离开')
          $('.loader_' + message.sender).addClass('hidden')
          $('.v-modal_' + message.sender).removeClass('hidden')
          $('.v-voice_' + message.sender).removeClass('text-green')
          $('.v-voice_' + message.sender).addClass('text-gray')
          window.pc[message.sender] && window.pc[message.sender].close()
          delete window.pc[message.sender]
        }, 1)
      }
      if (e.data && e.data['timeOut'] === "timeOut") {
        // 会议无响应通话
        const message = isJSON(e.data['message'])
        timeOut(() => {
          $('.v-status_' + message.sender).removeClass('hidden')
          $('.v-status_' + message.sender).text('无响应')
          $('.loader_' + message.sender).addClass('hidden')
        }, 0)
      }
      if (e.data && e.data['groupRecall'] === "groupRecall") {
        // 收到重新拨打的请求
        const message = isJSON(e.data['message'])
        if (message.content !== getQueryVariable('id')) {
          $('.v-status_' + message.content).addClass('hidden')
          $('.loader_' + message.content).removeClass('hidden')
        }
      }
      if (e.data && e.data['voiceSwitch'] === "voiceSwitch") {
        // 切换音频状态
        const message = isJSON(e.data['message'])
        if (message.content === 'true') {
          $('.v-voice_' + message.sender).removeClass('text-gray')
          $('.v-voice_' + message.sender).addClass('text-green')
        } else {
          $('.v-voice_' + message.sender).removeClass('text-green')
          $('.v-voice_' + message.sender).addClass('text-gray')
        }
      }
      if (e.data && e.data['voiceDisable'] === "voiceDisable") {
        // 全部静音
        headset = true
        voiceBtn()
        $('#voiceBtn').addClass('disabled')
      }
      if (e.data && e.data['voiceResume'] === "voiceResume") {
        // 取消静音
        headset = false
        voiceBtn()
        $('#voiceBtn').removeClass('disabled')
      }
    }
    window.onload = function() {
      const speakBtnText = document.getElementById('speakBtnText')
      if (getQueryVariable('platform') === 'h5') {
        postMsg = window.parent.postMessage
        speakBtnText.innerHTML = '听筒'
      }
      if (getQueryVariable('platform') === 'app') {
        speakBtnText.innerHTML = '扬声器'
      }
      updateGroupsInfo()
    }
  </script>
</html>
